<template>
    <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane label="配置" name="field" />
      <el-tab-pane label="数据" name="data" />
      <el-tab-pane label="交互" name="interaction" />
      <el-tab-pane label="参数" name="location" />
    </el-tabs>
    <div class="field-box">
      
      <el-scrollbar class="right-scrollbar">
        <!-- 组件属性 -->
        <el-form v-show="currentTab==='field'" size="small" label-width="90px">

          <el-collapse  v-model="activeNames" accordion>
            <el-collapse-item title="图层" name="1">

              <el-form-item v-if="configData.layerName!==undefined" label="图层名称">
                <el-input v-model="configData.layerName" placeholder="请输入图层名称" />
              </el-form-item>
            </el-collapse-item>

            <el-collapse-item title="标题" name="2">
              <el-form-item v-if="configData.chartOption.title.text!==undefined" label="标题">
                <el-input v-model="configData.chartOption.title.text" placeholder="请输入标题" />
              </el-form-item>

              <el-form-item v-if="configData.chartOption.title.subtext!==undefined" label="副标题">
                <el-input v-model="configData.chartOption.title.subtext" placeholder="请输入副标题" />
              </el-form-item>
              
              <el-form-item v-if="configData.chartOption.fontWeight!==undefined" label="标题粗细">
                <el-select v-model="configData.chartOption.fontWeight" placeholder="请选择">
                  <el-option label="normal" value="normal"></el-option>
                  <el-option label="bold" value="bold"></el-option>
                  <el-option label="bolder" value="bolder"></el-option>
                  <el-option label="lighter" value="lighter"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.title.x!==undefined" label="标题位置">
                <el-select v-model="configData.chartOption.title.x" placeholder="请选择">
                  <el-option label="居左" value="left"></el-option>
                  <el-option label="居中" value="center"></el-option>
                  <el-option label="居右" value="right"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.title.textStyle.fontSize!==undefined" label="标题字号">
                <el-input-number size="mini" controls-position="right" v-model="configData.chartOption.title.textStyle.fontSize"></el-input-number>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.title.textStyle.fontWeight!==undefined" label="标题粗细">
                <el-select v-model="configData.chartOption.title.textStyle.fontWeight" placeholder="请选择">
                  <el-option label="normal" value="normal"></el-option>
                  <el-option label="bold" value="bold"></el-option>
                  <el-option label="bolder" value="bolder"></el-option>
                  <el-option label="lighter" value="lighter"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.title.textStyle.fontFamily!==undefined" label="字体样式">
                <el-select v-model="configData.chartOption.title.textStyle.fontFamily" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in fontFamilys"
                    :key="index"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>

            </el-collapse-item>

            <el-collapse-item title="图例" name="3">    
              <el-form-item v-if="configData.chartOption.legend.show!==undefined" label="显示图例">
                <el-switch v-model="configData.chartOption.legend.show" />
              </el-form-item>

              <el-form-item v-show="configData.chartOption.legend.show===true" label="图例方向">
                <el-radio-group v-model="configData.chartOption.legend.orient">
                  <el-radio label="horizontal">纵向</el-radio>
                  <el-radio label="vertical">横向</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.legend.show===true" label="图例垂直位置">
                <el-select v-model="configData.chartOption.legend.top" placeholder="请选择">
                  <el-option label="顶部" value="normal"></el-option>
                  <el-option label="中部" value="middle"></el-option>
                  <el-option label="底部" value="bottom"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.legend.show===true" label="图例水平位置">
                <el-select v-model="configData.chartOption.legend.x" placeholder="请选择">
                  <el-option label="居左" value="left"></el-option>
                  <el-option label="居中" value="center"></el-option>
                  <el-option label="居右" value="right"></el-option>
                </el-select>
              </el-form-item>
            </el-collapse-item>

            <el-collapse-item title="环柱" name="4">

              <el-form-item v-if="configData.chartOption.pieRadiusMax!==undefined" label="外扩半径">
                <el-slider v-model="configData.chartOption.pieRadiusMax" :min="0" :max="200" :step="1" show-input></el-slider>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.pieRadiusMin!==undefined" label="内缩半径">
                <el-slider v-model="configData.chartOption.pieRadiusMin" :min="0" :max="100" :step="1" show-input></el-slider>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.pieRadiusDiff!==undefined" label="环柱宽度">
                <el-slider v-model="configData.chartOption.pieRadiusDiff" :min="0" :max="100" :step="1" show-input></el-slider>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.maxValue!==undefined" label="环柱最大值">
                <el-input-number v-model="configData.chartOption.maxValue" controls-position="right" :min="0"  :step="1"></el-input-number>
              </el-form-item>

              <!-- <el-form-item v-if="configData.chartOption.splitNumber!==undefined" label="底圆点样式">
                <el-select v-model="configData.chartOption.splitNumber" placeholder="请选择">
                  <el-option label="无" value="-10"></el-option>
                  <el-option label="虚线" value="10"></el-option>
                  <el-option label="实线" value="100"></el-option>
                </el-select>
              </el-form-item> -->

              <el-form-item v-if="configData.chartOption.borderWidth!==undefined" label="圆点宽度">
                <el-slider v-model="configData.chartOption.borderWidth" :min="0" :max="100" :step="1" show-input></el-slider>
              </el-form-item>
              
            </el-collapse-item>

            <el-collapse-item title="动画" name="5">
              <el-form-item v-if="configData.chartOption.animate!==undefined" label="载入动画">
                <el-select v-model="configData.chartOption.animate" placeholder="请选择">
                  <el-option
                    v-for="item in animateOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-collapse-item>
          </el-collapse >
        </el-form>
        
        <!-- 表单属性 -->
        <el-form v-show="currentTab === 'data'" size="small" label-width="90px">

           <data-source-config :dataSourceType="configData.chartOption.dataSourceType" :customData="configData" :customId="configData.customId" 
            @changeSource="changeSource"  @changeData="changeData" :baseType="'two'"></data-source-config>

          <el-form-item label="通用处理" v-if="configData.chartOption.customData!==undefined">
            <el-button type="primary" @click="editData">编辑</el-button>
          </el-form-item>
        </el-form>

         <!-- 组件位置 -->
        <el-form v-show="currentTab === 'location'" size="small" label-width="90px">
          <el-form-item label="X位置">
            <el-input-number v-model="configData.x" controls-position="right"  :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="y位置">
            <el-input-number v-model="configData.y" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="宽度">
            <el-input-number v-model="configData.width" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="高度">
            <el-input-number v-model="configData.height" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
        </el-form>

        <!-- 组件交互 -->
        <el-form v-show="currentTab === 'interaction'" size="small" label-width="90px">
          <el-form-item  label="是否开启图表联动">
              <el-switch v-model="configData.chartOption.isLink" @change="isLinkChange" />
          </el-form-item>

          <el-form-item v-show="configData.chartOption.isLink===true"  label="参数名称">
            <el-input v-model="arrName" placeholder="请参数名称" @blur.prevent="changeArrName()"/>
          </el-form-item>

          <el-form-item  v-show="configData.chartOption.isLink===true" label="绑定组件">
            <el-select v-model="configData.chartOption.bindList" multiple placeholder="请选择" @change="bindCharts">
              <el-option
                  v-for="item in chartList"
                  :key="item.customId"
                  :label="item.layerName"
                  :value="item.customId">
                </el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item  v-show="configData.chartOption.isLink===true" label="*参数说明">
            <div class="el-form-item__content">
              <span style="word-wrap: break-word;"><i style="color:#F00;">参数名={"legendName":"xx","seriesName":"xxx","data":xxx}</i></span>
            </div>
            <div class="el-form-item__content">
              <span >legendName:图例名称</span>
              <span style="display:block;">seriesName:系列名称</span>
              <span >data:选中值</span>
            </div>
            
          </el-form-item> 

          <!-- 下钻 -->
          <el-form-item  label="是否开启图表下钻">
              <el-switch v-model="configData.chartOption.isDrillDown" @change="isDrillDownChange"/>
          </el-form-item>

          <el-form-item v-show="configData.chartOption.isDrillDown===true"  label="下钻后展示的图表类型">
            <el-select v-model="configData.chartOption.drillDownChartType" clearable filterable placeholder="请选择" @change="drillDownChartChange">
                <el-option
                  v-for="item in drillDownOptions"
                  :key="item.chartType"
                  :label="item.layerName"
                  :value="item.chartType">
                </el-option>
              </el-select>
          </el-form-item>

          <el-form-item v-show="configData.chartOption.isDrillDown===true" label="弹窗背景颜色">
            <el-color-picker v-model="drillBgColor" show-alpha @change="drillDownColorChange"/>
          </el-form-item>

          <el-form-item  v-show="configData.chartOption.isDrillDown===true" label="*参数说明">
            <div class="el-form-item__content">
              <span style="word-wrap: break-word;"><i style="color:#F00;">drillParam=参数值</i></span>
            </div>
          </el-form-item> 

          <drill-down-config :drillDownDialogFlag.sync="drillDownDialogFlag" :drillDownDialogData="configData.chartOption.drillDownChartOption"/>
          <el-form-item v-show="configData.chartOption.isDrillDown===true"  label="">
            <el-button type="primary" @click="DrillDownClick">前去设置</el-button>
          </el-form-item>
          <!-- 是否开启图表远程控制 -->
        
          <el-form-item  label="是否开启图表远程控制">
                <el-switch v-model="configData.chartOption.isRemote" />
          </el-form-item>
          <Interactionwebsocket v-show="configData.chartOption.isRemote === true"
          :remote = 'configData.chartOption.remote' @getRemote="getRemote"></Interactionwebsocket>
          <el-form-item  v-show="configData.chartOption.isRemote === true" label="*参数说明">
            <div class="el-form-item__content">
              <span style="word-wrap: break-word;"><i style="color:#F00;">{"legendName":"xx","seriesName":"xxx","data":xxx}</i></span>
            </div>
            <div class="el-form-item__content">
              <span >legendName:图例名称</span>
              <span style="display:block;">seriesName:系列名称</span>
              <span >data:选中值</span>
            </div>
            
          </el-form-item> 
        </el-form>

      </el-scrollbar>
    </div>
    
    
    <el-dialog
      title="通用处理"
      v-if="open"
      :visible.sync="open"
      width="1000px"
      hight="900px"
      append-to-body
      :close-on-click-modal="false"
    >
      <data-editor
        :key="aceKey"
        @submitData="submitData"
        @cancelData="cancelData"
        :customData="configData.chartOption.customData==undefined?'':configData.chartOption.customData"
      ></data-editor>


    </el-dialog> 
  </div>
</template>

<script>

import {animateOptions} from '../../animate/animate'
import { drillDownOptions, getDrillDownOption } from '@/views/tool/datav/components/config/drillDown/drillDown'
import DrillDownConfig from './drillDown/drillDownConfig'
import { getLinkChart} from "../../util/LinkageChart";
import Interactionwebsocket from './chartDB/Interactionwebsocket'
import DataEditor from "@/views/tool/datav/components/config/runcode/DataEditor";
import DataSourceConfig from '@/views/tool/datav/components/config/DataConfig/DataSourceConfig'

export default {
  components: {
    DrillDownConfig,
    Interactionwebsocket,
    DataSourceConfig,
    DataEditor
  },
  props: ["costomData", "drawingList"],
  data() {
    return {
      fontFamilys:this.fontFamilys,
      currentTab: 'field',
      activeNames: ['1'],
      configData: this.costomData,
      animateOptions,
      drillDownOptions,
      staticDataValue: this.costomData != null ? JSON.stringify(this.costomData.chartOption.staticDataValue) : '',
      arrName: this.costomData != null ? this.costomData.chartOption.arrName : '',
      interfaceUrl: this.costomData.chartOption.interfaceURL != '' ? this.costomData.chartOption.interfaceURL : '',
      requestParameters: this.costomData.chartOption.requestParameters != '' ? this.costomData.chartOption.requestParameters : '',
      chartList: this.drawingList,
      drillDownDialogFlag: false,
      drillBgColor: this.costomData.chartOption.drillDownChartOption != null ? this.costomData.chartOption.drillDownChartOption.drillBgColor : 'rgba(4, 12, 121, 1)',
      aceKey:Math.random(),
      open:false,      
    }
  },
  //页面加载完执行
  mounted() {
    //获取可联动组件列表
    let chartList = getLinkChart(this.drawingList);
    this.chartList = chartList;

  },
  computed: {
    
  },
  watch: {
    configData: {
      deep: true,
      handler(newVal) {
        // console.log("1=>", newVal);
        this.$emit("costom-change", newVal);
      }
    },
    costomData: {
      deep: true,
      handler(newVal) {
        this.arrName = newVal.chartOption.arrName;
        this.configData = newVal;
        this.staticDataValue = JSON.stringify(newVal.chartOption.staticDataValue);
        this.interfaceUrl = newVal.chartOption.interfaceURL;
        this.requestParameters = newVal.chartOption.requestParameters;
      }
    },
  },
  methods: {
    changeSource(val){
      this.$set(this.configData.chartOption, 'dataSourceType', val);
    },
    changeData(val,id,type){
      if(this.configData.customId == id){
        if(type == 'static'){
          this.$set(this.configData.chartOption, 'staticDataValue', JSON.parse(val));
        }else if(type == 'url'){
          
          if(val.type == "interfaceUrl"){
            this.$set(this.configData.chartOption, 'interfaceURL', val.arr);
          }else if(val.type == "requestParameters"){
            this.$set(this.configData.chartOption, 'requestParameters', val.arr);
          }else if(val.type == "requestMethod"){
            this.$set(this.configData.chartOption, 'requestMethod', val.arr);
          }else if(val.type == "token"){
            this.$set(this.configData.chartOption, 'token', val.arr);
          }else if(val.type == "timeout"){
            this.$set(this.configData.chartOption, 'timeout', val.arr);
          }
        }else if(type == 'database'){
          this.$set(this.configData.chartOption, 'database', val.database);
          this.$set(this.configData.chartOption, 'bi', val.bi);
        }else if(type == 'form'){
          this.$set(this.configData.chartOption, 'formSource', val);
        }else if(type == 'websocket'){
           this.$set(this.configData.chartOption, 'interfaceKey', val);
        }
      }
      
    },
    changeArrName(){
      this.$set(this.configData.chartOption, 'arrName', this.arrName);
    },
    bindCharts(val){
       this.$set(this.configData.chartOption, 'bindList', val);
    },
    isLinkChange() {
      if (this.configData.chartOption.isLink == true) {
        this.$set(this.configData.chartOption, 'isDrillDown', false);
        //this.configData.chartOption.isDrillDown == false;
      }
    },
    isDrillDownChange() {
      if (this.configData.chartOption.isDrillDown == true) {
        this.$set(this.configData.chartOption, 'isLink', false);
        //this.configData.chartOption.isLink == false;
      }
    },
    drillDownChartChange(value) {
      const chartOption = getDrillDownOption(value, this.configData.chartOption.theme, this.configData.chartOption.bindingDiv);
      if(chartOption != null){
        chartOption.x = -1;
        chartOption.y = -1;
        chartOption.width = 900;
        chartOption.height = 600;

      }          
      this.$set(this.configData.chartOption, 'drillDownChartOption', chartOption);
      this.$set(this.configData.chartOption.drillDownChartOption, 'drillBgColor', this.drillBgColor);
    },
    drillDownColorChange(){

      if(this.configData.chartOption.drillDownChartOption != null){
        this.$set(this.configData.chartOption.drillDownChartOption, 'drillBgColor', this.drillBgColor);
      } 
    },
    DrillDownClick() {
      if (this.configData.chartOption.drillDownChartType == undefined || this.configData.chartOption.drillDownChartType == null) {
        this.$notify({
          title: '警告',
          message: '请选择关联的下钻组件',
          type: 'warning'
        });
        return false;
      }
      this.drillDownDialogFlag = true;
    },
    getRemote(val){
      this.$set(this.configData.chartOption, 'remote', val);
    },
    editData(){
      this.open = true;
    },
    cancelData(){
      this.open = false;
    },
    submitData(data){
      this.$set(this.configData.chartOption, 'customData', data);
      this.open = false;
    }    

  }
}
</script>

<style lang="scss" scoped>
/deep/ .center-tabs .el-tabs__item {
    width: 25%;
    text-align: center;
}
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }
  & .el-input + .el-input {
    margin-left: 4px;
  }
}

.select-item + .select-item {
  margin-top: 4px;
}
.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}
.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
}
.screen>:first-child{
  margin-top:37px
}

/**  滚动条凹槽的颜色，还可以设置边框属性  **/
::-webkit-scrollbar-track-piece { 

  background-color:#f8f8f8; 
  border-radius: 10px;
}
/** 滚动条的宽度  **/
::-webkit-scrollbar {

  width:9px;

  height:9px; 

}
/** 滚动条的设置  **/
::-webkit-scrollbar-thumb {

  background-color:#dddddd;

  background-clip:padding-box;

  min-height:28px; 
  border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover {

  background-color:#bbb; 

}
/deep/ .el-upload-dragger {
    background-color: #fff;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    box-sizing: border-box;
    width: 225px;
    height: 180px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
</style>